<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSLN签到机</title>
  <link rel="icon" type="image/png" sizes="16x16" href="checkin_machin_img/icon-logo.png">
  <link rel="stylesheet" href="checkin_machin_stylesheet/style.css">
  <script src="checkin_machin_js/jquery.min.js"></script>
  <script src="checkin_machin_js/echarts.simple.min.js"></script>
  <script src="checkin_machin_js/jq.js"></script>
  <script src="checkin_machin_js/ES5/graph.js"></script>
</head>

<body>
  <div class="bg">
    <div class="wrapper-left showLeft a-time005 a-delay003">
      <img src="checkin_machin_img/cryptofont.png" alt="">
      <div class="confirm-method">
        <h2 class="confirm-header">您可以使用</h2>
        <ul>
          <li class="showLeft a-time003 a-delay1">
            <span>指纹</span>
            <span class="img-zhiwen"></span>
          </li>
          <li class="showLeft a-time003 a-delay013">
            <span>读者证条码</span>
            <span class="img-tiaoma"></span>
          </li>
          <li class="showLeft a-time003 a-delay015">
            <span>RFID读者证</span>
            <span class="img-rfid"></span>
          </li>
          <li class="showLeft a-time003 a-delay017">
            <span>IC卡</span>
            <span class="img-ic"></span>
          </li>
          <li class="showLeft a-time003 a-delay019">
            <span>身份证</span>
            <span class="img-id"></span>
          </li>
          <li class="showLeft a-time003 a-delay2">
            <span>社保卡</span>
            <span class="img-ss"></span>
          </li>
        </ul>
        <h2 class="confirm-footer">进行签到</h2>
      </div>
    </div>
    <div class="wrapper-right showRight a-time005">
      <h1 class="zoomIn a-time005 a-delay005"><i class="h1bg"></i>北京华夏中学北京华夏中学北京华夏中学<span>(期刊阅览室)</span></h1>
      <div class="dataframe">
        <div class="dataframe-left">
          <h3>今年签到</h3>
          <p>9999999</p>
          <h3>本月签到</h3>
          <p>9999999</p>
          <h3>今日入馆</h3>
          <p>9999999</p>
          <h3>今日出馆</h3>
          <p>9999999</p>
        </div>
        <div class="dataframe-center">
          <div id="linegraph"></div>
          <h3><i class="img-tongji"></i>月签到统计</h3>
        </div>
        <div class="dataframe-right showRight a-time005 a-delay005">
          <h3><i class="img-rank"></i>本月到馆明星</h3>
          <ul class="reader-ranking">
            <li class="ranking-item">
              <div class="ranking-num">1</div>
              <div class="reader-photo">
                <img src="checkin_machin_img/touxiang.jpg" alt="读者照片">
              </div>
              <div class="msg">
                <div class="name">张三张三张三</div>
                <div class="readcount">到馆次数：9999</div>
              </div>
            </li>
            <li class="ranking-item">
              <div class="ranking-num">2</div>
              <div class="reader-photo">
                <img src="checkin_machin_img/touxiang.jpg" alt="读者照片">
              </div>
              <div class="msg">
                <div class="name">张三张三张三</div>
                <div class="readcount">到馆次数：9999</div>
              </div>
            </li>
            <li class="ranking-item">
              <div class="ranking-num">3</div>
              <div class="reader-photo">
                <img src="checkin_machin_img/touxiang.jpg" alt="读者照片">
              </div>
              <div class="msg">
                <div class="name">张三张三张三张三张三张三张三</div>
                <div class="readcount">到馆次数：999</div>
              </div>
            </li>
            <li class="ranking-item">
              <div class="ranking-num">4</div>
              <div class="reader-photo">
                <img src="checkin_machin_img/touxiang.jpg" alt="读者照片">
              </div>
              <div class="msg">
                <div class="name">张三张三张三</div>
                <div class="readcount">到馆次数：999</div>
              </div>
            </li>
            <li class="ranking-item">
              <div class="ranking-num">5</div>
              <div class="reader-photo">
                <img src="checkin_machin_img/touxiang.jpg" alt="读者照片">
              </div>
              <div class="msg">
                <div class="name">张三张三张三</div>
                <div class="readcount">到馆次数：999</div>
              </div>
            </li>
            <li class="ranking-item">
              <div class="ranking-num">6</div>
              <div class="reader-photo">
                <img src="checkin_machin_img/touxiang.jpg" alt="读者照片">
              </div>
              <div class="msg">
                <div class="name">张三张三张三</div>
                <div class="readcount">到馆次数：999</div>
              </div>
            </li>
            <li class="ranking-item">
              <div class="ranking-num">7</div>
              <div class="reader-photo">
                <img src="checkin_machin_img/touxiang.jpg" alt="读者照片">
              </div>
              <div class="msg">
                <div class="name">张三张三张三</div>
                <div class="readcount">到馆次数：999</div>
              </div>
            </li>
            <li class="ranking-item">
              <div class="ranking-num">8</div>
              <div class="reader-photo">
                <img src="checkin_machin_img/touxiang.jpg" alt="读者照片">
              </div>
              <div class="msg">
                <div class="name">张三张三张三</div>
                <div class="readcount">到馆次数：999</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="data-footer showInBottom a-time005 a-delay005">
        <h3><i class="img-zaiguan"></i>当前在馆：<span>999999</span></h3>
        <h3><i class="img-zuowei"></i>剩余座位：<span>999999</span></h3>
      </div>
    </div>

    <!-- 测试用按钮 -->
    <button id="btn1">测试错误消息按钮</button>
    <button id="btn2">测试读者信息按钮</button>
    <!-- error -->
    <div id="error"></div>

    <!-- 读者刷卡弹出窗口 -->
    <div class="reader-window fadeIn a-time005">
      <div class="mask">
        <a href="javascript:;" class="close"></a>
        <div class="welcome-layer">
          <h2>签到成功，欢迎到馆</h2>
          <div class="touxiang">
            <img src="checkin_machin_img/touxiang.jpg" alt="读者头像">
          </div>
          <div class="reader-info">
            <h3>读者姓名：<span>张三张三</span></h3>
            <h3>读者条码：<span>006600</span></h3>
            <h3>到馆时间：<span>2018-03-10 19:41</span></h3>
            <h3>离馆时间：<span>--</span></h3>
            <h4>今日在馆时间：<span>--</span>分钟</h4>
            <h4>本月在馆时间：<span>999</span>小时</h4>
          </div>
        </div>
        <!-- 离馆窗口，与签到窗口结构一致，只是内容不同 -->
        <!-- <div class="welcome-layer">
          <h2>离馆成功，欢迎下次再来</h2>
          <div class="touxiang">
            <img src="checkin_machin_img/touxiang.jpg" alt="读者头像">
          </div>
          <div class="reader-info">
            <h3>读者姓名：<span>张三张三</span></h3>
            <h3>读者条码：<span>006600</span></h3>
            <h3>到馆时间：<span>2018-03-10 19:41</span></h3>
            <h3>离馆时间：<span>2018-03-10 19:46</span></h3>
            <h4>今日在馆时间：<span>200</span> 分钟</h4>
            <h4>本月在馆时间：<span>999</span> 小时</h4>
          </div>
        </div> -->
      </div>
    </div>
  </div>
  </ul>
</body>

</html>
